<!--
 * @Author: your name
 * @Date: 2020-07-18 03:14:30
 * @LastEditTime: 2020-07-22 19:33:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /waibao/iuyun-device-web/wechat/src/components/pages/devicefinance.vue
-->
<template>
    <div class="container">
      <div class="componentTopInv">
        <div class="changeMore">
            <div class="navTitle" @click="spotCheckView"><i class="el-icon-arrow-left icon"></i><span>财务管理</span></div>
            <div class="left">
              <div class="scan" :style="{transform: isAndriod?'translateY(1.5px)':'translateY(4px)'}">
                <!-- <span class="iconfont icon-shaixuan" @click="changeMore" style="font-size:20px;"></span> -->
                <iconSvg name="filter" w="19px" h="19px" @click.native="searchHandle" ></iconSvg>
              </div>
            </div>
            <div class="right">
              <div @click="backToHomepage" class="scan backToHomepage" :style="{transform: isAndriod?'translateY(-3.5px)':'translateY(-3.5px)','margin-right':'18px'}">
                <span class="iconfont"
                v-focusable @click="backToHomepage" style="font-size:17px;"><iconSvg name="home" w="20" h="20" style="transform: translateY(3px);" class="d_icon"></iconSvg></span>
              </div>
          </div>
        </div>
    </div>
        <!-- <div class="pageTop">
            <span class="iconfont backHistory" @click="spotCheckView">&#xe6eb;</span>
            <span class="sellWorkOrder_header_title">财务记录</span>
            <span class="iconfont" @click="backToHomepage" style="float:right;line-height:40px;font-size:17px;margin-right:15px;">&#xe668;</span>
            <span class="iconfont" @click="searchHandle" style="float:right;line-height:40px;font-size:20px;margin-right:15px;">&#xe641;</span>
        </div> -->
        <div class="content">
            <div class="top">
                <span class="fl">统计数据：合计 {{totalPay}} 元</span>
                <span class="fr">
                    <span style="color: hsla(0,0%,100%,.5);" @click="show = !show">{{show?"收起":"展开"}}</span>
                    <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                    <span class="iconfont icon2" v-if="show">&#xe669;</span>
                </span>
            </div>
            <div class="financeTable" v-if="show">
                    <table>
                    <tr>
                        <td style="width:20%">类型</td>
                        <td style="width:60%">花费金额</td>
                        <td style="width:20%">条数</td>
                    </tr>
                    <tr>
                        <td>新购</td>
                        <td>{{newBuyPay}} 元</td>
                        <td>{{newBuyTotal}}条</td>
                    </tr>
                    <tr>
                        <td>维修</td>
                        <td>{{maintainPay}}元</td>
                        <td>{{maintainTotal}}条</td>
                    </tr>
                    <tr>
                        <td>更换</td>
                        <td>{{replacePay}} 元</td>
                        <td>{{replaceTotal}}条</td>
                    </tr>
                    <tr>
                        <td>合计</td>
                        <td>{{totalPay}} 元</td>
                        <td>{{effectiveTotal}}条</td>
                    </tr>
                    </table>
            </div>
            <div v-show="financialTableData.length==0" class="not-content">
              <img src="/static/img/zwlr-icon.png" class="img4">
              <div class="title">暂无相关财务记录数据</div>
            </div>
            <div class="me_scroll_box">
              <mescroll-vue class="me_scroll" ref="mescroll6" :down="mescrollDown6" :up="mescrollUp6" @init="mescrollInit6">
                  <div class="financeCard" :class="{active1:clickIndex == index}" @click="showdetails(item.recordId,index)" v-for="(item,index) in financialTableData" :key="index">
                    <div class="row">
                      <div><span>所属部门：</span><span>{{item.departmentName}}</span></div>
                      <div class="btn" :class="{'green':item.type == 1,'blue':item.type == 2,'red':item.type == 3}">
                        {{item.type == 1 ? "新购" : item.type == 2 ? "维修" : item.type == 3 ? "更换" : ""}}
                        </div>
                    </div>
                    <div class="row">
                      <div><span>设备名称：</span><span>{{item.deviceName}}</span></div>
                      <div><span>部件名称：</span><span>{{item.componentName}}</span></div>
                    </div>
                      <div class="line"></div>
                      <div class="bottom">
                        <span style="text-align: left;padding-left: 11px;">实际金额：¥ {{item.actualAmount.toFixed(2)}}<div class="verLine"></div></span>
                        <span>提交时间：{{item.time | filtterTime}}</span>
                      </div>
                  </div>
                </mescroll-vue>
            </div>
        </div>
      <div :class="showMore?'MoreDataP show':'MoreDataP hide'" ref="MoreDataP" @tap="removeFouce">
        <div class="MoreDataPInner">
          <div class="searchItem" @tap.stop>
            <div class="title">组织筛选</div>
              <div class="inner" style="font-size:16px;touch-action: none;">
                <div class="curSelectItem" v-show="!isShowSelectRow" @click.stop="showSelectRow">
                  <span class="iconfont">&#xe601;</span>{{curDepartment.departmentName}}
                    <div :class="{select:true,and:isAndriod}"></div>
                </div>
                <tree-item
                  v-show="isShowSelectRow"
                  ref="treeItem"
                  class="item"
                  :item="treeData"
                  @get_department="getDepartment"
                  :selectDepartments="departmentSelect">
                </tree-item>
            </div>
          </div>
          <div class="searchItem flex">
            <div class="title">设备名称</div>
            <div class="inner">
              <input type="text" id="ipName" @tap.stop :class="isEmptyData?'emptyData':''" @blur="setTip('name')" @focus="resetColor('name')" v-model="searchForm.deviceName" />
              <span class="placeholder" v-if="searchForm.deviceName == ''">输入设备名称</span>
            </div>
          </div>
          <div class="searchItem">
            <div class="line"></div>
          </div>
          <div class="searchItem flex">
            <div class="title">部件名称</div>
            <div class="inner">
              <input type="text" id="ipNum" @tap.stop :class="isEmptyData?'emptyData':''" @blur="setTip('num')" @focus="resetColor('num')" v-model="searchForm.componentName" />
              <span class="placeholder" v-if="searchForm.componentName == ''">输入部件名称</span>

            </div>
          </div>
          <div class="searchItem">
            <div class="line"></div>
          </div>
          <div class="searchItem">
            <div class="title">实际金额</div>
                  <Flexbox justify="center">
                      <flexbox-item :span="5">
                            <div class="inputWraper">
                                <div class="unit">￥</div>
                                <input class="amount" type="text" v-model="searchForm.mixMoney">
                                <span class="amount-placeholder" v-if="!searchForm.mixMoney">请输入实际金额</span>

                            </div>
                      </flexbox-item>
                      <flexbox-item :span="1">
                          <div class="linebox"><span class="mline"></span></div>
                      </flexbox-item>
                      <flexbox-item :span="5">
                            <div class="inputWraper">
                          <div class="unit">￥</div>
                          <input class="amount" type="text" v-model="searchForm.maxMoney">
                          <span class="amount-placeholder" v-if="!searchForm.maxMoney">请输入实际金额</span>

                            </div>
                      </flexbox-item>
                  </Flexbox>

          </div>
          <div :class="{searchItem:true,addP:isAndriod&&(isInputName||isInputNum),pb:true}">
            <div class="title" style="padding:0 8px;">记录类型</div>
            <div class="inner">
              <div class="runStatusBtn">
                  <Flexbox :gutter="15">
                      <FlexboxItem v-for="(item,index) in priorityData" :key="index">
                          <span class="reType" :class="{'active':searchForm.operatorType == item.id}" @click="searchForm.operatorType = item.id">{{item.name}}</span>
                      </FlexboxItem>
                  </Flexbox>
              </div>
            </div>
          </div>
        </div>
        <div :class="{BtnGroup:true,isAndriod:isAndriod&&(isInputName||isInputNum)}">
          <div :class="{'btn-reset':true,'active':isActiveResetBtn}" @tap="reset(false)">重置</div>
          <div :class="{'btn-over':true,'active':isActiveOkBtn}" @click="submitSearch">确认</div>
        </div>
    </div>
    </div>
</template>

<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import DeviceDao from '../../daos/device_dao'
import BScroll from "better-scroll";
import TreeItem from "../../components/common/tree-item2.vue";
import { Flexbox, FlexboxItem } from 'vux'

export default {
    name: "deviceFinanceList",
        //返回首页的公共方法
    inject: ["backToHomepage"],
    components:{
        MescrollVue,
        BScroll,
        TreeItem,
        Flexbox,
        FlexboxItem
    },
    data() {
       return {
         clickIndex:-1,
         //搜索
        showMore:false,
        Scroll:null,
        isShowSelectRow:true,
        curDepartment:{
          departmentName:'全企业',
          id:'0'
          },
          departmentId:0,
      treeData:{},
      departmentSelect:{},
      isInputName:false,
      isInputNum:false,
      inputNameTip:'输入设备名称',
      inputNumTip:'输入部件名称',
      isEmptyData:false,
      isStaticBtns:false,
            priorityData:[
                {id:1,name:"新购"},
                {id:2,name:"维修"},
                {id:3,name:"更换"}
            ],
      isActiveOkBtn:false,
      isActiveResetBtn:false,

         //
           show:false,
            mescroll6: null,
            mescrollDown6: {},
            mescrollUp6: {
              that: this,
              callback: this.upCallback6,
              page: {
                num: 0,
                size: 20
              },
              htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
              noMoreSize: 5,
              toTop: {
                src: "./static/mescroll-totop.png",
                offset: 1000
              },
              isBounce:false,
            },
            financialTableData:[],
            maintainPay:'', //维修花费 ,
            maintainTotal:'', //维修记录数 ,
            newBuyPay:'', //新购花费 ,
            newBuyTotal:'', //新购记录数 ,
            replacePay:'', //更换花费 ,
            replaceTotal:'', //更换记录数 ,
            effectiveTotal:'', //有效记录数 ,
            totalPay:'', // 总花费
            searchForm:{
              departmentName:"",
              deviceName:"",
              componentName:"",
                operatorType:"",
                submitTime:[],
                status:"",
                departmentId:'',
                deviceId:'',
                componentId:'',
                maxMoney:'',
                mixMoney:''
            },

       }
    },
    created() {
      this.isAndriod = this.isAndriodDevice();
      this.getOrganization()


    },
    mounted() {
        this.upCallback6({num:1,size:20},this.mescroll6);
        // let tHegiht = $(".top").outerHeight()
        // let tableH = $(".financeTable").outerHeight()
        // let x = tHegiht + 97;
        // if(this.show){
        //   x += tableH + 12
        // }
        // $('.me_scroll_box').css("height","calc(100vh - "+x+"px)")

    },
    watch: {
      show(valn,valo){
          // this.$nextTick(() => {
          //   let tHegiht = $(".top").outerHeight()
          //   let tableH = $(".financeTable").outerHeight()
          //   let x = tHegiht + 97;
          //   if(valn){
          //     x += tableH + 12
          //   }
          //   $('.me_scroll_box').css("height","calc(100vh - "+x+"px)")
          // })
      },
       $route :{
          deep:true,
          handler:function(){
            this.upCallback6({num:1,size:20},this.mescroll6);
          }
      },
    },
      beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.clickIndex = -1;
      });
    },
    methods: {
          reset: function(isActive){
      if(!isActive){
        this.isActiveResetBtn = true
      }
      setTimeout(() => {
        this.isActiveResetBtn = false
        this.searchForm.deviceName = '';
        this.searchForm.componentName = ''
        this.searchForm.mixMoney = ''
        this.searchForm.maxMoney = ''
        this.searchForm.operatorType = 0
        // this.department={}
        this.department={}
        this.isSelectData = false
        this.departmentId=0
        this.$refs.treeItem.isOpen = false
        this.$refs.treeItem.toggle(this.treeData)
        this.$refs.treeItem.clearCheck()
      }, 300);

      // this.$refs.treeItem.department = {}
    },
          resetColor(name){
      this.setScroll()
      this.isStaticBtns = true
      this.isEmptyData = false
      switch (name) {
        case 'name':
          this.isInputName = true
          break;
        case 'num':
            this.isInputNum = true
            break;
        default:
          break;
      }
    },
          setTip(name){
      this.setScroll()
      this.isStaticBtns = false
      setTimeout(() => {
        switch (name) {
        case 'name':
          this.isInputName = false
          break;
        case 'num':
          this.isInputNum = false
          break;
        default:
          break;
      }
      }, 300);
    },
      getDepartment: function(data){
        this.department = data;
        this.curDepartment = data;
        this.departmentId = data.id;
        this.searchForm.departmentId = data.id
        this.searchForm.departmentName = data.departmentName
        console.log('tree',data)
        setTimeout(() => {
          this.isShowSelectRow = false
        }, 100);
    },
   // 获取组织成员架构
    getOrganization: function(){
        this.$http(this.$API.getMyOrganization,{},true, false, true).then((data)=>{
            this.treeData = data
        })
    },
          showSelectRow(){
            console.log('fuck')
      this.isShowSelectRow = true
    },
          setScroll(){
      if(!this.Scroll){
        this.Scroll = new BScroll(this.$refs.MoreDataP,{ tap: true});
      }

      setTimeout(function() {
        let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    removeFouce(){
      this.setScroll()
      document.getElementById('ipName').blur();
      document.getElementById('ipNum').blur();
      // alert('blur')
    },
          // 判断是否安卓手机
    isAndriodDevice() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
      return isAndroid
		},
        showdetails(id,index){
          this.clickIndex = index
          setTimeout(()=>{
            this.$router.push({path: '/manage/deviceDetailManage/financeDetail', query: {recordId: id}});
          },200)
        },
        submitSearch(){
        // this.searchForm.deviceName = '';
        // this.deviceCodeChoose = ''
            this.showMore = false
            this.reset()
            this.upCallback6({num:1,size:20},this.mescroll6)
        },
        searchHandle(){

      if(this.showMore){
        if(this.searchForm.deviceName.length>0||this.searchForm.componentName.length>0){
          this.isSelectData = true
          this.confirmShow = true
          return
        }else{
          this.showMore = false;
          this.navTitle = '设备管理'
          this.showDep = false;
        }
      }else if(this.isSelectData){
        this.showMore = true;
      }else{
        this.showMore = true;
        this.reset(true)
        return
      }
    },

        spotCheckView(){
            history.back(-1)
        },
        mescrollInit6(mescroll) {
          this.mescroll6 = mescroll;
        },
        //设备财务记录
        upCallback6(page, mescroll) {
          let params ={
                departmentName: this.searchForm.departmentName ? this.searchForm.departmentName : null,
                deviceName: this.searchForm.deviceName ? this.searchForm.deviceName : null,
                componentName: this.searchForm.componentName ? this.searchForm.componentName : null,
                componentId: this.searchForm.componentId ? this.searchForm.componentId : null,
                departmentId: this.searchForm.departmentId ? this.searchForm.departmentId : null,
                deviceId: this.searchForm.deviceId ? this.searchForm.deviceId : null,
                maxMoney: this.searchForm.maxMoney ? this.searchForm.maxMoney : null,
                mixMoney: this.searchForm.mixMoney ? this.searchForm.mixMoney : null,
                pageNo: page.num,
                pageSize: page.size,
                status: this.searchForm.status ? this.searchForm.status : null,
                times: this.searchForm.submitTime ? this.searchForm.submitTime : null,
                type: this.searchForm.operatorType ? this.searchForm.operatorType : null,
          }
          DeviceDao.getFinacialList(params, res => {
            if (res) {
              if (page.num === 1) {
                this.financialTableData = [];
              }

              this.financialTableData = this.financialTableData.concat(res.record);
                this.maintainPay = res.maintainPay //维修花费 ,
                this.maintainTotal = res.maintainTotal//维修记录数 ,
                this.newBuyPay = res.newBuyPay//新购花费 ,
                this.newBuyTotal = res.newBuyTotal//新购记录数 ,
                this.replacePay = res.replacePay //更换花费 ,
                this.replaceTotal = res.replaceTotal //更换记录数 ,
                this.effectiveTotal = res.effectiveTotal //有效记录数 ,
                this.totalPay = res.totalPay // 总花费
              this.$nextTick(() => {
                mescroll.endByPage(res.record.length, res.total);
                // mescroll.endSuccess(res.record.length);
              });
            } else {
              mescroll.endErr();
            }
          });
        },
    },
    filters:{
        //设备类型过滤
        ruleText(val){
            let type = ''
            _this.ruleTypeList.forEach(item=>{
                if(item.indicator == val){
                    type = item.dataTypeName
                }
            })
            return type
        },
        filtterTime(val){
          if(val){
            return val.split(' ')[0]
          }
        }
      },
}
</script>

<style lang="less" scoped>
    @import '../../styles/iconfont.css';
  .me_scroll_box{
    width: 100%;
  }
.not-content{
  text-align: center;
  margin: 0 auto;
  img{
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  /*.img4{*/
    /*margin-top:70px;*/
  /*}*/
  .title{
    margin: 8px auto;
    width:126px;
    height:40px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(158,198,251,1);
    line-height:20px;
    text-align: center;
  }
}
.reType{
display: inline-block;
text-align: center;
font-size: 14px;
padding: 5px 0;
  background-color: #292A4D;
        width: 100%;
        color:#fff;
        border-radius: 3px;

}
.active{
    background-color: #456de6;
}
.container{
    height: 100%;
    width: 100%;
}
    .changeMore{
      color:#fff;
      background: #22233f;
      z-index: 110;
      position: fixed;
      display: flex;
      width: 100%;
      height: 50px;
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 5px !important;
      box-sizing: border-box;
      border-bottom: 1px solid #494a5f;
      div{
        flex:1;
      }
      .left,.right{
        // float: left;
        // width: 49.7%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        .scan{
          // float: left;
          // margin-left: 30%;
          margin-top: 11px;
          display: inline-block;
        }
        .backToHomepage{
          margin-top: 11px !important;
        }
      }
      .left{
        text-align: center;
      }
      .right{
        text-align: right;
          .scan{
            margin-right: 10px;
            &:nth-child(1){
              position: relative;
              &::before{
                content: "";
                width: .026667rem;
                height: 9.9px;
                background: hsla(0,0%,100%,.4);
                position: absolute;
                top: calc(~'50% + 6px');
                left: -14px;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                border-left: 0.026667rem solid rgba(255, 255, 255, 0.1);
              }
            }
          }
      }
      .navTitle{
        white-space: nowrap;
        display: flex;
        text-align: center;
        color: #ffffff;
        span{
          font-size: 16px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
        }
        .icon{
          font-size: 20px;
          margin-left:10px;
          display: inline-block;
          height: 50px;
          line-height: 50px;
          color: #ffffff;
        }
      }
      .left{
        // width: 49.8% !important;
        // border-right: 1px solid #494a5f;
      }
    }
    .pageTop{
        height: 40px;
        color: #fff;
        position: fixed;
        height: 40px;
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #22233f;
        z-index: 9;
            .backHistory{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg);
        line-height:40px;
        font-size:25px !important;
        margin-left:10px;
        touch-action: none;
    }
        .sellWorkOrder_header_title{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
    }
    .content{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 0 10px;
        box-sizing: border-box;
        padding-top:50px;
        -webkit-overflow-scrolling: touch;
        background: #1b1c32;
        .top{
            display: inline-block;
            width: 100%;
            margin: 14px 0 4px 0;
            span{
                display: inline-block;
                &:first-child{
                    padding-left: 20px;
                    font-size: 14px;
                    color: #fff;
                }
            }
            .fr{
                float: right;
            }
            .fl{
                float: left;
            }
            .iconfont{
                margin-right: 10px;
                font-size: 12px;
                    color: hsla(0,0%,100%,.5);
            }
            .icon2{
                transform:rotate(90deg);
                -ms-transform:rotate(90deg); 	/* IE 9 */
                -moz-transform:rotate(90deg); 	/* Firefox */
                -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
                -o-transform:rotate(90deg);
            }
        }
    }
      .financeCard{
        border-radius: 4px;
        background:#292A4D;
        margin-bottom: 12px;
        position: relative;
        transition: .2s all ease-in-out;
        color:#fff;
        margin: 7px 0;
        font-size: 14px;
          padding: 15px 0px;
          &.active1{
            background: #383A69;
          }
          .btn{
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 12px;

          }
          .green{
            background-color: #67C23A;
          }
          .blue{
            background-color: #409EFF;
          }
          .red{
            background-color: #F56C6C;
          }
        .line{
          width: 100%;
          height:1px;
          background:rgba(255,255,255,0.1);
          margin: 10px 0;
          }
        .row{
          display: flex;
          padding: 0px 10px;
          margin-bottom: 8px;
          justify-content: space-between;
          div{
            display: flex;
            flex: 0 0 auto;
            span{
                &:last-child{
                  display: inline-block;
                  width: 85px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  word-break: break-all;
                }
            }
          }
        }
        .bottom{
          display: flex;
          justify-content: space-between;
          span{
            position: relative;
            display: inline-block;
            width: 50%;
            text-align: center;
          }
          .verLine{
            position: absolute;
            right:1px;
            top: 0;
            width: 1px;
            height: 20px;
            background:rgba(255,255,255,0.1);

          }

        }
  }
    .financeTable{
    padding: 0 15px;
    color:#fff;
    font-size: 12px;
    margin-bottom: 10px;

    table{
      width: 100%;
      border-color:#fff;
      border-style: solid;
      border-width:1px 0px 0px 1px;
      border-spacing: 0;
      line-height: 1.5;
    }
    tr{
      td{
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #fff;
         border-right: 1px solid #fff;
      }
    }
  }


  .MoreDataP{
      touch-action: none;
      background: #22233F;
      position: fixed;
      z-index: 1000;
      height: calc(~"100% - 50px");
      overflow: scroll;
      top: 50px;
      right: 0;
      left:0;
      bottom: 0;
      // padding-bottom: 45px;
      transition: transform 0.3s ease-in-out;
      transform: translateY(-120%);
      .MoreDataPInner{
        touch-action:none!important;
        width: 100%;
        color: #ffffff;
        // height: calc(~"100% + 1px");
        // overflow: scroll;
        // -webkit-overflow-scrolling: touch;
      }
      &.show{
        transform: translateY(0);
      }
      &.hide{
        transform: translateY(-120%);
      }
      .weui-grids:before,.weui-grid:after{
        border:none;
      }
      .weui-grid:active{
        background: none !important;
      }
      .weui-grid{
        padding: 0 !important;
      }
      .flex{
        display: flex;
      }
      .searchItem{
        padding: 5px 15px;
        .linebox{
          display: flex;
          .mline{
            display: inline-block;
            width: 90%;
            height:1px;
            background:rgba(255,255,255,0.1);
          }
        }
        .inner{
          position: relative;
          .placeholder{
            position: absolute;
            color: #9898b1;
            width: 100%;
            left: 10px;
            top: 14px;
            font-size: 14px;
            pointer-events: none;
          }
        }
        .inputWraper{
          position: relative;
          display: inline-flex;
          align-items: center;
          padding: 8px 0;
              background-color: #292a4d;
          .unit{
            font-size: 14px;
            color:#fff;
            padding: 0 5px 0 10px;
          }
          .amount{
            font-size: 14px!important;
          }
          .amount-placeholder{
              position: absolute;
              color: #9898b1;
              width: 100%;
              left: 30px;
              top: 9px;
              font-size: 14px;
              pointer-events: none;

          }
        }
        &.addP{
          padding-bottom: calc(~'100vh - 400px') !important;
        }
        &.pb{
          padding: 0 12px;
          padding-bottom: 50px;
          .inner{
            .runStatusBtn{
              button{
              }
            }
          }
        }
        .curSelectItem{
          line-height: 3em;
          background-color:#292A4D;
          position: relative;
          .iconfont{
            margin-right: 1.1em;
            margin-left: 0.3em;
            font-size: 14px;
          }
          .select{
            position: absolute;
            right: 42px;
            top: 15px;
            border-radius: 50%;
            width: 18px;
            height: 18px;
              display: inline-block;
              border-color: #456de6;
              background-color: #456de6;
              font-size: 14px;
              transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
              括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
              -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
            &.and:after{
              left: 5.3px;
              top: -0.2px;
            }
            &:after{
              content: "L";
              width: 18px;
              height: 18px;
              line-height: 18px;
              position: absolute;
              color: #fff;
              left: 6px;
              top: -1.2px;
            }
          }
          input{
            /* //在input的内容之后插入新内容 */
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right:35px;
            content: "";
            display: inline-block;
            width: 18px !important;
            height: 18px;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 14px;
            color: #fff;
            border: 3px solid #ddd;
            background-color: #fff;
            box-sizing: border-box;
            /* 规定两个并排的带边框的框 */
            &:after{
              /* //在input的内容之后插入新内容 */
              position: absolute;
              top:50%;
              transform: translateY(-50%);
              right:0;
              content: "";
              display: inline-block;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              text-align: center;
              line-height: 14px;
              font-size: 14px;
              color: #fff;
              border: 3px solid #ddd;
              background-color: #fff;
              box-sizing: border-box;
              /* 规定两个并排的带边框的框 */
            }
            &:checked:after{
              /* //在input的内容之后插入新内容 */
              /* 规定两个并排的带边框的框 */
              /* 选中之后的样子 */
              content: "L";
              transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
              括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
              -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
              border-color: #456de6;
              background-color: #456de6;
            }
          }
        }
        .title{
          line-height: 50px;
          margin-right: 10px;
          font-size: 16px;
        }
        .inner{
          flex:1 0 auto;
          input[type="text"]{
            height: 3em !important;
            line-height: 3em !important;
            // background: #292A4D;
            width: 100%;
            padding: 0 8px;
            transition: background .3s ease-in-out;
            &:focus{
              background: #383A69;
            }
          }
        }
        .line{
          height: 1px;
          width: 100%;
          background-color: #464656;
        }
      }
      .deviceName{
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }
      .deviceCode{
        border-bottom: 1px solid rgba(255,255,255,0.2);
      }
      div{
        input{
          text-align: left;
          color:rgba(255,255,255,1);
          font-size: 16px;
          width: 100%;
          &::-webkit-input-placeholder{
            color:rgba(255,255,255,.5);
            font-size: 14px;
            height: 3em !important;
            line-height: 3em !important;
          }
        }
      }
    }
      .BtnGroup{
    position: fixed;
    display: flex;
    width: fit-content;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 44px !important;
    line-height: 44px !important;
    transition: 0.3s all;
    &.isAndriod{
      position: static !important;
    }
    div{
      text-align: center;
      height: 44px !important;
      border-top: 1px #3967DC solid;
    }
  }
   .btn-reset{
    flex: 1;
    background: #22233f;
    padding: 0 15px;
    // margin: 0!important;
    // height: 30px;
    // line-height: 30px!important;
    // border-bottom-left-radius: 15px;
    // border-top-left-radius: 15px;
    border-radius: 0;
    color: #456DE6;
    line-height: 44px !important;
    transition: 0.3s all;
    &.active{
      background: #456DE6;
      color: #fff;
    }
  }
  .btn-over{
    flex: 2;
    background: #3967DC;
    padding: 0 15px;
    color: #fff;
    // margin: 0!important;
    // height: 30px;
    // line-height: 30px!important;
    // border-bottom-right-radius: 15px;
    // border-top-right-radius: 15px;
    border-radius: 0;
    line-height: 44px !important;
    transition: 0.3s all;
    &.active{
      background: #6E92FF;
    }
  }
</style>
